<template>
  <van-tabbar v-model="page_key"
    v-show="this.$store.state.setting.show_xfooter"
    class="footer_tabbar"
    icon-class="footer_tabbar_icon"
  >
  <van-tabbar-item
      v-for="item in tabbar_list"
      :key="item.index"
      :link="item.toUrl"
      :selected="item.active == 1"
    >
      <img slot="icon" :src="item.icon" />
      <img slot="icon-active" :src="item.icon_active" />
      <p>{{ item.title }}</p>
      <!-- <span slot="label">{{ item.title }}</span> -->
    </van-tabbar-item>

    <!-- <van-tabbar-item
      v-for="item in tabbar_list"
      :key="item.index"
      :link="item.toUrl"
      :selected="item.active == 1"
    >
      <img slot="icon" :src="item.icon" />
      <img slot="icon-active" :src="item.icon_active" />
      <span slot="label">{{ item.title }}</span>
    </van-tabbar-item> -->

  </van-tabbar>
</template>

<script>
export default {
  name: "footerVue",
  data() {
    return {
      page_key:1,
      tabbar_list: [
         {
          title: "首页",
          active: 1,
          toUrl: "/",
          icon: require("@/assets/images/common/d-shouye.png"),
          icon_active: require("@/assets/images/common/home_active_icon.png")
        },{
          title: "督办",
          active: 0,
          toUrl: "/",
          icon: require("@/assets/images/common/d-duban.png"),
          icon_active: require("@/assets/images/common/home_active_icon.png")
        },{
          title: "消息",
          active: 0,
          toUrl: "/",
          icon: require("@/assets/images/common/d-xiaoxi.png"),
          icon_active: require("@/assets/images/common/home_active_icon.png")
        },
        
        // {
        //   title: "首页",
        //   active: 1,
        //   toUrl: "/",
        //   icon: require("@/assets/images/common/home_icon.png"),
        //   icon_active: require("@/assets/images/common/home_active_icon.png")
        // },
        // {
        //   title: "成绩查询",
        //   active: 0,
        //   toUrl: "/score/index",
        //   icon: require("@/assets/images/common/score_icon.png"),
        //   icon_active: require("@/assets/images/common/score_active_icon.png")
        // },
        // {
        //   title: "联系我们",
        //   active: 0,
        //   toUrl: "/contact_us/index",
        //   icon: require("@/assets/images/common/link_icon.png"),
        //   icon_active: require("@/assets/images/common/link_active_icon.png")
        // },
        // {
        //   title: "会员中心",
        //   active: 0,
        //   toUrl: "/user/userinfo",
        //   icon: require("@/assets/images/common/user_icon.png"),
        //   icon_active: require("@/assets/images/common/user_active_icon.png")
        // }
      ]
    };
  },
  created() {
    this.show_tabbar();
  },
  activated() {
    this.page_key++;
    this.show_tabbar();
  },
  methods: {
    show_tabbar() {
      this.tabbar_list.forEach(element => {
        console.log(this.$route.path.split("/")[1]);
        if (this.$route.path.split("/")[1] == element.toUrl.split("/")[1]) {
          console.log(element.title)
          element.active = 1;
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" >
.footer_tabbar {
  width: 100%;
}

.footer_tabbar .footer_tabbar_icon {
  width: 22px;
  height: 22px;
  margin-bottom: 0.1rem;
}

.footer_tabbar .footer_tabbar_icon img {
  height: 100%;
  width: auto;
}

.footer_tabbar .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
  color: #3333ff;
}


</style>